<template>
	<view class="container">
		<u-navbar title="施工案例" :border-bottom="false">
			<view slot="right" class="navbar-right" v-on:click="navigateTouploadcase()">
				<text>上传</text>
			</view>
		</u-navbar>
		<view class="caselist">
			<view class="caseitem" v-for="(caseitem,caseindex) in casestexts" :key="caseindex">
				<view class="casepublisher">
					<u-avatar src="/static/avatar.jpg" size="90"></u-avatar>
					<view>
						<text class="publishername">工地彭于晏</text>
						<text class="publishtimes">08-24</text>
					</view>
				</view>
				<view class="casetexts">
					<text>{{showcasesText(caseindex)}}</text>
					<text class="showall" v-on:click="showAlltexts(caseindex)" v-if="!isShowall[caseindex]">展开</text>
				</view>
				<view class="casesimages" :class="{'oneimg':caseitem.images.length==1,'twoimg':caseitem.images.length==2,'moreimg':caseitem.images.length>2}">
					<image :src="caseimage" mode="" v-for="(caseimage,imagesindex) in caseitem.images" v-on:click="previewImages(caseindex,imagesindex)"></image>
				</view>
				<view class="caeseadd">
					<u-icon name="/static/locationicon.png" size="30"></u-icon>
					<text>江苏省徐州市风华园3号楼东户</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//模拟数据 案例文本
				casestexts:[
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/=0.jpg']
					},
					{
						text:'今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！今天又完工一单！',
						images:['/static/=0.jpg','/static/=0.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/=0.jpg','/static/=0.jpg','/static/=0.jpg']
					}
				],
				isShowall:[false,false,false]
			}
		},
		methods: {
			//展开案例文本
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			previewImages(caseindex,imagesindex){
				const that=this;
				console.log(caseindex,imagesindex)
				console.log(that.casestexts[caseindex].images)
				uni.previewImage({
					current:imagesindex,
					urls:that.casestexts[caseindex].images,
					indicator:"default"
				})
			},
			navigateTouploadcase(){
				uni.navigateTo({
					url:'uploadcase/uploadcase'
				})
			}
		},
		computed:{
			showcasesText(){
				// const that=this;
				 return (index)=>{
					 if(this.isShowall[index] || this.casestexts[index].text.length<=80)
					 {
						 // this.$set(this.isShowall,index,true);
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.casestexts[index].text;
					 }else{
						 return this.casestexts[index].text.substr(0,79)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  min-height: 100%;
		  background-color: #F4F8FB;
		  .navbar-right{
			  background-color: #0EAE64;
			  color: #fff;
			  padding-left: 15px;
			  padding-right: 15px;
			  font-size: 15px;
			  padding-top: 5px;
			  padding-bottom: 5px;
			  border-radius: 5px;
			  margin-right: 5px;
		  }
		  .caselist{
			  width: 100%;
			  height: auto;
			  padding-bottom: 20rpx;
			  .caseitem{
				  width: 750rpx;
				  background-color: #FFFFFF;
				  padding-top: 20rpx;
				  padding-bottom: 20rpx;
				  
				  margin-top: 20rpx;
			  }
			  .casepublisher{
				  width: 680rpx;
				  height: 100rpx;
				  display: flex;
				  align-items: center;
				  margin: auto;
				  view{
					  display: flex;
					  flex: 1;
					  flex-wrap: wrap;
				  }
				  text{display: block;width: 100%;margin-left: 20rpx;}
				  .publishername{font-size: 30rpx;}
				  .publishtimes{font-size: 23rpx;color: #888888;}
			  }
			  .casetexts{
				  font-size: 28rpx;
				  word-break: break-all;
				  
				  width: 680rpx;
				  margin: auto;
				  margin-top: 15rpx;
			  }
			  .showall{color: #2979FF;}
			  .casesimages{width: 680rpx;height:auto;margin: auto; margin-top: 30upx;display: flex;flex-wrap: wrap;justify-content: space-between;}
			  .oneimg image{
			  	width: 300upx;
			  	height: 500upx;
			  }
			  .twoimg image{
			  	width: 327upx;
			  	height: 250upx;
			  }
			  .moreimg image{
			  	width: 220upx;
			  	height: 235upx;
			  }
			  .caeseadd{
				  width: 680rpx;
				  margin: auto;
				  height: auto;
				  margin-top: 30rpx;
				  display: flex;
				  align-items: flex-start;
				  text{margin-left: 20rpx;}
			  }
		  }
	  }
</style>
